<template>
  <div class="cart-control">
    <transition name="move">
      <div class="cart-decrease" v-show="countnum>0" @click.stop="decrease">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
    </transition>
    <div class="cart-count" v-show="countnum>0">{{countnum}}</div>
    <div
      ref="addBall" 
      class="cart-add icon-add_circle" 
      @click.stop="addToShopCar"></div>
  </div>
</template>

<script>
  const EVENT_ADD = 'add'
 
  export default {
    name: 'cart-control',
    props: {
      food: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    data() {
      return {
        ballFlag: true
      }
    },
    computed: {
      countnum() {
        //getFoodCount是一个对象，存储着所有已选食物的对应的数量
        return this.$store.getters.getFoodCount[this.food.name] >=0 ? this.$store.getters.getFoodCount[this.food.name] : 0
      }
    },
    methods: {
      addToShopCar() {
        // 显示小球
        this.ballFlag = !this.ballFlag
        // 数量变更（+1 、-1）
        if(!this.food.count) {
          //为food添加上count属性，用$set方法
          this.$set(this.food, 'count', 0)
          // 拼接上本地存储的数据
          this.food.count = this.countnum + 1
          // console.log(this.food.count)
        } else {
          this.food.count = this.countnum
          this.food.count++
        }
        const foodinfo = {
          name: this.food.name,
          price: this.food.price,
          count: this.food.count
        }
        // 将购物数据存储到vuex仓库中
        this.$store.commit("addToCar", foodinfo)  

        // 构建添加到购物车的动画小球所需的数据，并缓存到vuex中
        const addRect = this.$refs.addBall.getBoundingClientRect()
        const rectInfo = {
          ballFlag: true,
          left: addRect.left,
          top: addRect.top,
          x: addRect.x, // x与y数据未曾用到
          y: addRect.y
        } 
        this.$store.commit('commitButtonRect',rectInfo)  
        // console.log(this.$store.getters.getBottonRect)
      },
      decrease() {        
        if(!this.food.count) {
          // 为food添加上count属性，用$set方法
          this.$set(this.food, 'count', 0)
          // 重新从vuex store中获取数据，并更新给food.count
          this.food.count = this.countnum        
        } 
        if(this.food.count) {
          this.food.count--
        }
        const desFoodinfo = {
          name: this.food.name,
          count: this.food.count
        }
        this.$store.commit("updateFoodSelected", desFoodinfo)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .cart-control
    height 30px
    .cart-decrease
      float left
      padding 3px
      opacity: 1
      .inner
        display block
        height 24px
        font-size 24px
        color $color-blue
        transition: all 0.4s linear
        transform: rotate(0)
      &.move-enter-active, &.move-leave-active
        transition: all 0.4s linear
      &.move-enter, &.move-leave-to
        opacity: 0
        transform: translate3d(24px, 0, 0)
        .inner
          transform: rotate(180deg)
    .cart-count
      float left
      padding 0 6px
      font-size 10px
      color $color-grey
      line-height 30px
    .cart-add
      float left
      padding 3px
      font-size 24px
      color $color-blue
</style>
